<template>
	<view>
		<view class="share" @touchmove.stop.prevent="{}">
			<view class="mask"></view>
			<view class="layer" @tap.stop="{}">
				<view class="h1">分享</view>
				<view class="list">
					<view class="box">
						<button @click="closeShare" plain="true" open-type="share" class="icon duoren1" style="color: #008000;border: 0;line-height: 80upx;"></button>
						<button @click="closeShare" plain="true" open-type="share" class="title" style="border: 0;">
							微信好友
						</button>
					</view>
					<view class="box" @click="getPoster">
						<view class="icon erweima"></view>
						<view class="title">
							二维码海报
						</view>
					</view>
				</view>
				<view class="btn" @click="closeShare">取消</view>
			</view>
		</view>
		<Poster ref="poster" :canvasFlag.sync="canvasFlag" @cancel="canvasFlag=true" :posterObj.sync="posterData"/>
	</view>
</template>

<script>
import Poster from "@/components/poster"
export default {
	components: {
		Poster
	},
	props: {
		datas: Object,
	},
	data() {
		return {
			canvasFlag: true,
			posterData:{}
		}
	},
	mounted() {
		
	},
	methods: {
		closeShare() {
			this.$emit('close')
		},
		async getPoster() {
			let pages = getCurrentPages()
			let currentPage = pages[pages.length - 1]
			let qrcode = await this.$api('GET','poster/'+this.datas.id,{page:currentPage.route})
			this.posterData = Object.assign(this.datas,{qrcode:qrcode})
			setTimeout(()=>{
				this.canvasFlag=false//显示canvas海报
				this.$refs.poster.createCanvasImage()//调用子组件的方法
			},200)
		},
	}
}
</script>

<style lang='scss'>
	.share{
		.mask{
			background-color: rgba(0,0,0,.5);
			position: fixed;
			width: 100%;
			height: 100%;
			top:0;
			z-index: 100;
		}
		.layer{
			width: 100%;
			position: fixed;
			z-index: 101;
			bottom: 0;
			background-color: rgba(255,255,255,0.9);
			.list{
				width: 100%;
				display: flex;
				padding:10upx 0 30upx 0;
				.box{
					width: 50%;
					display: flex;
					justify-content: center;
					flex-wrap: wrap;
					.icon{
						font-size: 80upx;
					}
					.title{
						display: flex;
						justify-content: center;
						width: 100%;
						font-size: 26upx;
					}
				}
			}
			.btn{
				width: 100%;
				height: 100upx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28upx;
				border-top: solid 1upx #666666;
			}
			.h1{
				width: 100%;
				height: 80upx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 34upx;
			}
		}
	}
</style>